Design Tokensを考える前に俺たちは変数名について考え直すことがあるのではないか
https://gyazo.com/c23c7c38e90e271121e3d12fd652d17f
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
大山奥人, おおやまみちのく a.k.a やまのく
得意領域
マークアップ・フロントエンド・UIデザイン・アクセシビリティ
既婚で1児の父と猫🐈🐈🐈の飼い主
増税前に戸建ても手に入れました。戸建てはいいですね…🏠
https://gyazo.com/886314cd5ad4b350984407600c1e3c6c
https://gyazo.com/d378ae2ea396ba913cccff03e6b75d4f
https://gyazo.com/d56463288dd3170d8aece68572f527df
興味ある話題あったら懇親会とかで話しましょうや
今回の話すこと・話さないこと
正解についてを話す感じではない
チームや会社に持ち帰って議論したり考え直すきっかけになれれば
https://gyazo.com/bf04495c0db15a3056502137272cc99c
アプリケーションやウェブサイト上での一貫性が保たれ、ユーザーが期待する機能性やユーザビリティを提供できるもの
デバイスを超えるものでWeb以外でもモバイルアプリにも提供できる
スタイルガイドラインとの違い
そのブランドが何なのかをコード単位で表現されたもの
yamanoku.icon コンポーネント単位で「あ！これってアレじゃん！」ってなれるもの
有名どころ
アメリカ合衆国のWebデザインシステム
世はまさに大デザインシステム時代
デザインシステムツールの流行
事業会社がデザインシステムについてガチンコで考えるコミュニティ
参加企業
メルなんとか
サイバーなんとか
ビズなんとか
リクルートテクなんとか
frなんとか
弁護士なんとか.com
2019年で4回目
前身のイベント
デザインシステムのツールが増えたのはこうした機会で議論されて開発された背景があるそうです
Single Source of Truth（単一の情報源）と呼ばれるもの
利用することのメリット
そのToken値こそが真である（信頼できるデータ）
デザインデータから逐一カラーコード・空き・余白などを取得しなくてもいい
一括置き換えしやすくなる
大元を一気に変える
スタイルを使ってる箇所を変更する
Tokensの例
カラー
テキスト
背景色
ボーダー
フォント
シャドウ
メディアクエリ
スマートフォン
タブ
デスクトップ
アニメーション
Tokens形式
デザインシステムというものを構築する面で考える必要がある１つの部分
本題：Design Tokensを設定する上で気をつけなければいけないと思ってること
（もとい変数名についてを考え直したいこと）
例：スタイル名と実際のカラーが不一致
起こりうる悲劇
https://gyazo.com/5dba2a8c0cbbcb58bde3bdf6f81b1108 https://twitter.com/8845musign/status/1176725368696270850
使い方として多様なシーンで利用されていたのではないか
クラス名だけが形骸化してしまった
色が目視でわかる人ならいいが、わからない人はこの違いに気付けるのか？
変数名を色名でつけるのは悪手なような気がしてる
その色名はほんとうにその色なのか？
$greenだけど青緑
「いやまぁgreenじゃん」「まぁそうですが…」
色盲の人はその色がちゃんと見えるか？
「これはgreenだから」「（そうは見えないのですが…）はい！」
https://gyazo.com/95a0518dfd6707eb677e5a9ef2a9e26e https://twitter.com/murokaco/status/1179702099354902528
わかる
曖昧な色名はどうつける？
https://gyazo.com/1f3d9374a1f7d12b658c5ebcf9c25505
どう変数名をつける？
https://gyazo.com/6c1a2c95c104ec489de50d84da8a9c20
赤い方がpurple、青いほうがviolet
と、分かっていたとしてもコードベースだけで瞬時に切り替えられるだろうか？
ある程度教養は必要な気はするが… yamanoku.icon 色についてのアプローチ例
カラー名が「色の名前」に準拠しきってない
https://gyazo.com/f8eb734831a0b41139e7c1b1ce4bc5a9
Pacific bridge
Squid ink
Doctor
「赤」についてもRed〜みたいなのばかりではなくバリエーションがある
https://gyazo.com/ca9662a3cd4e78206ccbda34f54f8a3d
覚える内容は増えるが、独立性は保てている
例：その単語はイメージしやすいものか
プログラミングは英語
皆さんの英語力はいかほどか？
聴きも読みも杜撰なレベルです yamanoku.icon
primary, secondary
button-color-primary、button-color-secondary
みたいな感じで、よく見るワードですね
ではその次はなんでしょうか？
https://gyazo.com/3649c05e400db327ff4b11af9315f87a https://kw-note.com/trivia/what-comes-after-primary-secondary/
教養問題
そもそも「プライマリ」ってなんだよ
番号名でやることが正解だろうか？
見出しレベルのようなイメージ
$button-color-01, $button-color-02, $button-color-03, $button-color-04...
うーん
モーション・アニメーションがあったりしたら…
https://gyazo.com/febc491246a35fa4dd0590c25d45089b
指定された変数名で動きは統一されるけど
果たしてその言葉で想起しやすいだろうか？
親しみやすいワードを考える
https://gyazo.com/aba4581a5e8fc595d9d2a95908b6b693 https://twitter.com/hattorixxx/status/917720911914004481
バージョンが上がるのをバイブスが上がるとか言ってたらしい
変数名は所詮変数でしかないが
普段使っているものを使いやすくする仕組みはあってもいいと思った
yamanoku.iconの実装から見る反省・改善点
ポートフォリオサイトでもカスタムプロパティを通してDesign Tokensを利用している
https://gyazo.com/e89b92732c8eec1fc66826bb88ab5f99
--rhythm: 24px
marginとかpaddingはここに準拠する
line-height: calc(var(--rhythm) * 2);
問題点
カラーの変数は色名指定してしまってる
一部ハードコーディング箇所あり
ライト
https://gyazo.com/3c7cb17698b69af30a920bd28d53e146
ダーク
https://gyazo.com/2633a27e6eb32e7f4e69cb5890aa1e7c
リンクカラーはライトがlinkBlueだけどダークはblueを使用している
後付でやってしまったがための功罪
そもそもblueとは何のためのものなのか？
yamanoku.icon それ専用の指定もあっていいのかなと感じるところ
今はページ・コンポーネント数が少ないので破綻しているところはないが大規模だとどうなる？
Issue建てた
そんな感じの話で伝えたいこと
デザインシステムとは今後関わらんから…とこういう話題に参加しなくてもいいわけではない 「人間が使うもの」を想定してどう設計するのがいいかを今一度考えてみてほしい
新卒・中途の人が参入してきたときに使いやすくなってるか？
外部に依頼出ししたときにも使いやすくなっているか？
再び参画したときに開発しやすいままになっているか？
見た目だけではない文字情報における留意もしていかないといけない
それが万人に使いやすいものを目指すならなおのこと
俺たちは変数名について考え直しておかないといけない気がする